<template>
  <el-select
    v-model="selectData"
    :placeholder="placeholder"
    :clearable="clearable"
    @change="change"
    class="select"
    v-bind="propOptions"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script setup>
import { watch, ref } from "vue"

const props = defineProps({
  modelValue: {
    default: null,
  },

  options: {
    typeof: Array,
    default: () => [],
  },

  propOptions: {
    typeof: Object,
  },

  placeholder: {
    typeof: String,
    default: "请选择",
  },

  clearable: {
    typeof: Boolean,
    default: false,
  },
})

const selectData = ref(null)
watch(
  () => props.modelValue,
  (val) => {
    selectData.value = val
  },
  {
    immediate: true,
  }
)

const emit = defineEmits({
  change(value) {
    return value
  },
  ["update:modelValue"](value) {
    return value
  },
})

function change(val) {
  emit("change", val)
  emit("update:modelValue", val)
}
</script>
<style lang="scss" scoped>
.select {
  width: 100%;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #b4c3da;
  color: #fff;
}
</style>
